<!DOCTYPE html>
<html>
	<head>
		<title>TODO supply a title</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
		<canvas id="canvas">您浏览器似乎不支持HTML5哦，请使用较新的浏览器来访问此页面...</canvas>
		<script>
			/**
			 * 图片设置为灰度
			 * 
			 * @param {type} context 画布
			 * @returns {undefined}
			 */
			function gray(context) {
				var imgd = context.getImageData(0, 0, 500, 300);
				var pix = imgd.data;
				for (var i = 0, n = pix.length; i < n; i += 4) {
					var grayscale = pix[i  ] * .3 + pix[i + 1] * .59 + pix[i + 2] * .11;
					pix[ i ] = grayscale;	// red
					pix[i + 1] = grayscale;	// green
					pix[i + 2] = grayscale;	// blue
				}
				context.putImageData(imgd, 0, 0);
			}

			/**
			 * 针对img进行二次绘制加工
			 * 
			 * @param {type} imgElement img标签对象
			 * @returns {undefined}
			 */
			function drawImage(imgElement) {
				var imgSrc = imgElement.src;
				var canvas = document.createElement("canvas");
				var context = canvas.getContext("2d");
				var img = new Image();
				img.src = imgSrc;
				img.onload = function() {
					canvas.width = img.width;
					canvas.height = img.height;
					context.drawImage(img, 0, 0);
					gray(context);
					var img1 = new Image();
					img1.src = '__PUBLIC__/Home/images/step.png';
					img1.onload = function() {
						context.drawImage(img1, (canvas.width - img1.width) / 2, (canvas.height - img1.height) / 2);
						imgElement.src = (canvas.toDataURL('image/png'));
					};
				};
			}
        </script>
	</body>
</html>
